<template>
  <!-- 外联图标 -->
  <div
    v-if="extend"
    class="svg-icon svg-icon-extend"
    :style="styleExternalIcon"
  ></div>
  <svg v-else class="svg-icon">
    <use :xlink:href="`#icon-${icon}`"></use>
  </svg>
</template>

<script setup>
import { computed, defineProps } from 'vue'

// 判断是否为外联图标
function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  // 图标类名
  className: {
    type: String,
    default: ''
  }
})

const extend = computed(() => {
  return isExternal(props.icon)
})

/**
 * 外部图标样式
 */
const styleExternalIcon = computed(() => ({
  mask: `url(${props.icon}) no-repeat 50% 50%`,
  '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%` // 兼容处理
}))
</script>

<style lang="scss" scoped>
// svg图标默认样式
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}

// 外联图标为div，需要处理背景颜色
.svg-icon-extend {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>
